<template>
  <div class="cascader-panel">
    <CascaderPanelList
      :options="options"
      :value="selectedValues"
      @select="handleSelectItem"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CascaderPanelList from './CascaderPanelList.vue'

const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
})

const selectedValues = ref([])

const handleSelectItem = (value, level) => {
  const values = [...selectedValues.value]
  values[level - 1] = value
  values.length = level
  selectedValues.value = values
}
</script>

<style scoped>
.cascader-panel {
  display: flex;
}
</style>